<!DOCTYPE html>
<html lang="en">

	<head>

		<meta charset="utf-8" />

		<title></title>

		<!-- IE -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 设置 viewport -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 兼容国产浏览器的高速模式 -->
		<meta name="renderer" content="webkit">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

		<!-- BEGIN 全局样式 -->
		<link rel="stylesheet" type="text/css" href="../../css/reset.css" />
		<link href="../../lib/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />

		<link rel="stylesheet" type="text/css" href="../../lib/bootstrapvalidator/dist/css/bootstrapValidator.css" />
		<!-- END 全局样式 -->
		<style type="text/css">
			html{
					height: 100%;
			    /*margin: 12px 12px;*/
			    background: #fff;
			   margin: 0;
			}
			body{
				height: 100%;
				margin: 0;
			}

		</style>
	</head>

	<!-- END HEAD -->

	<!-- BEGIN BODY -->

	<body class="">
		<div class="container-fluid mt-15">
			<form class="form " id="form">
				<div class="form-group">
					<label for="real_name">真实姓名</label>
					<input type="text" class="form-control" id="real_name" placeholder="请输入真实姓名" name="real_name">
				</div>
				<div class="form-group">
					<label for="username">账号</label>
					<input type="text" class="form-control" id="username" placeholder="请输入账号" name="username">
				</div>
				<!--<div class="form-group pwdBox">
					<label for="password">密码</label>
					<input type="text" class="form-control" id="password" placeholder="请输入密码" name="password" onfocus="this.removeAttribute('readonly');this.type='password'" autocomplete="off">
				</div>
				<div class="form-group pwdBox">
					<label for="confirmPassword">确认密码</label>
					<input type="text" class="form-control" id="confirmPassword" placeholder="请再次输入密码" name="confirmPassword" onfocus="this.removeAttribute('readonly');this.type='password'" autocomplete="off">
				</div>-->

				<div class="form-group">
					<label for="roleList">角色</label>
					<select class="form-control" id="roleList" name="role">
						<option value="1">超级管理员</option>
						<option value="2">管理员</option>
						<option value="3">普通教职工</option>
					</select>
				</div>

				<div class="form-group">
					<label for="mobile">手机号码</label>
					<input type="text" class="form-control" id="mobile" placeholder="请输入手机号码" name="mobile">
				</div>
				<div class="form-group">
					<label for="email">邮箱</label>
					<input type="text" class="form-control" id="email" placeholder="请输入邮箱" name="email">
				</div>

				<div>
					<button type="button" class="btn btn-success btn-save">
					  	<span class="glyphicon glyphicon-floppy-saved"></span>
					  	保存
				 	 </button>
					<button type="reset" class="btn btn-warning btn-reset">
			  			<span class="glyphicon glyphicon-remove-sign"></span>
			  			清空
			  		</button>
				</div>

			</form>
		</div>

		<!--核心脚本sss-->
		<script src="../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/laypage/1.2/laypage.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

		<script src="../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common/localstorage-ie.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/bootstrapvalidator/dist/js/bootstrapValidator.js" type="text/javascript" charset="utf-8"></script>
		
		<!--公共脚本-->
		<script src="../../js/common/common.js" type="text/javascript" charset="utf-8"></script>
		<!--[if lt IE 9]>
		<script src="../../js/excanvas.min.js"></script>
		<script src="../../js/respond.min.js"></script>  
		<![endif]-->
		<!--核心脚本eee-->

		<script type="text/javascript">
			$(document).ready(function() {
				//获取角色列表
				fnAjax.method_4(
					url_join("role/list"),
					{},
					"post",
					function(data){
						console.log(data);
						$.getRoleList(data.data,$("#roleList"));//渲染角色列表
						
						if(localStorage.getItem("optionType") == "edit") {
							$(".pwdBox").remove();
							//获取单例用户信息
							fnAjax.method_4(
								url_join("user/show"),
								{uid:localStorage.getItem("nId")},
								"post",
								function(data){
									console.log(data);
									$("#real_name").val(data.data.real_name);
									$("#username").val(data.data.username).attr("readonly","readonly");
									$("#roleList").val(data.data.role_id);
									$("#mobile").val(data.data.mobile);
									$("#email").val(data.data.email);
								}
							);
						}
					}
				);
				
				
				
				
				//初始化表单验证
				$('#form')
					.bootstrapValidator({
						message: '这个值是无效的',
						feedbackIcons: {
							valid: 'glyphicon glyphicon-ok',
							invalid: 'glyphicon glyphicon-remove',
							validating: 'glyphicon glyphicon-refresh'
						},
						fields: {
							real_name:{
								validators: {
									notEmpty: {
										message: '真实姓名是必需的，不能是空的'
									},
									stringLength: {
										min: 2,
										max: 20,
										message: '真实姓名至少2个字符，最多20个字符'
									},
									regexp: {
										regexp: /^[\u4e00-\u9fa5],{0,}|[A-Za-z]+$/,
										message: '真实姓名只能是汉字或者英文字母'
									},
								}
							},
							username: {
								message: '账号是无效的',
								validators: {
									notEmpty: {
										message: '账号是必需的，不能是空的'
									},
									stringLength: {
										min: 3,
										max: 20,
										message: '账号必须大于3，小于20个字符'
									},
									regexp: {
										regexp: /^[a-zA-Z0-9_\.]+$/,
										message: '账号只能由字母、数字、点和下划线组成'
									},
									different: {
										field: 'password',
										message: '账号和密码不可能是相同的'
									}
								}
							},
//							password: {
//								validators: {
//									notEmpty: {
//										message: '密码是必需的，不能是空的'
//									},	
//									stringLength: {
//										min: 6,
//										max: 20,
//										message: '密码必须大于6，小于20个字符'
//									},
//									regexp: {
//										regexp: /^[a-zA-Z0-9_\.]+$/,
//										message: '密码只能由字母、数字、点和下划线组成'
//									},
//									different: {
//										field: 'username',
//										message: '密码不可能与账号相同'
//									}
//								}
//							},
//							confirmPassword: {
//				                validators: {
//				                    notEmpty: {
//				                        message: '确认密码是必需的，不能是空的'
//				                    },
//				                    identical: {
//				                        field: 'password',
//				                        message: '密码和它的确认是不一样的'
//				                    },
//				                    different: {
//				                        field: 'username',
//				                        message: '密码不可能与用户名相同'
//				                    }
//				                }
//				            },
				            email: {
				                validators: {
				                	notEmpty: {
										message: '邮箱地址是必需的，不能是空的'
									},
				                    emailAddress: {
				                        message: '输入不是有效的电子邮件地址'
				                    }
				                }
				            },
				            mobile:{
				            	message: '手机号是无效的',
								validators: {
									notEmpty: {
										message: '手机号是必需的，不能是空的'
									},									
									regexp: {
										regexp: /^[1][3,4,5,7,8][0-9]{9}$/,
										message: '请输入正确的手机号格式'
									},
									
								}
				            },
				            
						}
					})
					.on('success.form.bv', function(e) {
						// 阻止表单提交
						e.preventDefault();
						//添加
						if(localStorage.getItem("optionType") == "add") {
							// 获得表单实例
							var $form = $(e.target);
							fnAjax.method_4(
								url_join("user/create"),
								$.serializeToObj($form.serialize()),	
								"post",
								function(data) {
									console.log(data);
									layer.msg("操作成功", {
										time: 1500
									}, function() {
										parent.location.reload();
									});
								}
							);
						}
						//更新
						else {
							$('#form').append($('<input type="hidden" value="' + localStorage.getItem("nId") + '" name="uid"/>'));
							var $form = $(e.target);
							fnAjax.method_4(
								url_join("user/update"),
								$.serializeToObj($form.serialize()),
								"post",
								function(data) {
									console.log(data);
									layer.msg("操作成功", {
										time: 1500
									}, function() {
										parent.location.reload();
									});
								}
							);
						}

					});
				// 手动验证表单
				$('.btn-save').click(function() {
					$('#form').bootstrapValidator('validate');
				});

			});
		</script>
	</body>

</html>